<template>
  <div>
    <city-header></city-header>
    <Search></Search>
    <list :letter='letter' :cities='cities' :hot='hotCities'></list>
    <alphabet  @changeLetter='handleLetterChange' :cities='cities'></alphabet>
  </div>
</template>
<script>
import axios from "axios";
import cityHeader from "./components/header";
import Search from "./components/search";
import list from "./components/list";
import alphabet from "./components/alphabet";

export default {
  name: "city",
  components: { cityHeader, Search, list, alphabet },
  data () {
    return {
      cities:{},
      hotCities:[],
      letter:''
    }
  },
  methods:{
    getCityInfo(){
      axios('/api/city.json').then(this.getCityInfoSucc)
    },
    getCityInfoSucc(res){
        res = res.data;
        if(res.ret && res.data){
          const data = res.data;
          this.cities = data.cities;
          this.hotCities = data.hotCities;
        }
    },
    handleLetterChange(letter){
          if(letter){
            this.letter = letter;
          }
    }
  },
  mounted() {
    this.getCityInfo()
  }
};
</script>
<style lang='stylus' scoped></style>


